<template>
  <div class="dutyToday h100">
    <dividerTitle :title="componentTitle">
      <editForm :formConfig="organizationConfig" ref="organizationForm" :formData="organizationData"></editForm>
    </dividerTitle>
    <div class="duty-list" ref="dutyListRef">
      <div class="duty-content" ref="dutyContentRef">
        <div class="position-list" v-for="(items,key) in dutyList" :key="key">
          <div class="location-title-in" style="text-align:left">
            <span class="position-item"><i class="iconfont icon-bengzhan"></i> {{items.position}}</span>
          </div>
          <div class="person-list" v-for="(i,index) in items.personType" :key="index">
            <div class="onDuty" v-show="i.person.length !=0" >
              <div class="duty-name">{{i.typeName}}</div>
              <div class="duty-detail" >
                <div class="user-info-item" v-for="(item,j) in i.person" :key="j">
                  <div class="duty-info">
                    <span class="onduty-name">{{item.staffName}}</span>
                    <i class="iconfont icon-shoujihaoma"></i>
                    <span class="onduty-phone">{{item.user && item.user.phone || ''}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="no-data" v-if="!dutyList.length">暂无数据</div>
      </div>
      <div class="more-part" v-if="isScroll">
        <span  @click="openMore()" class="more-btn">更多<i class="el-icon-arrow-right"></i></span>
      </div>
    </div>
    <dialogPublic
      :title="'今日值班'"
      :show.sync="moreDialog"
      @doClose="() => (moreDialog = false)"
      :singleClose = 'singleClose'
      :btnText="['关闭']"
      noFootBtn
      appendTobody
      width="1120px"
    >
     <more-duty v-if="moreDialog" :dutyList="dutyList" :currentOrg="currentOrg"></more-duty>
    </dialogPublic>
  </div>
</template>

<script>
import moreDuty from '@/views/workStation/dutyToday/moreDuty'
import {
  getTableConfigApi, //获取表格过滤器数据
  setTableConfigApi, //更新表格过滤器数据
} from "@/api/common";
import { getLocations } from "@/api/operationManagement/handoverManagement.js";
import {getTodayDutyList,todayDutyData} from "@/api/workStation/workStation.js"
export default {
  components:{
    moreDuty
  },
  props:['componentTitle'],
  computed:{
   
  },
  data() {
    return {
      filterObj:{},
      isScroll:false,
      organizationConfig:{
				labelWidth: "0px",
        itemArr: [
				  /* {
            label: "",
            prop: "organizationName", //多选时，字段要为数组类型
            propArr: "organizationArr",
            idsStr: "organizationId",
            orgStr: "orgStr",
            orgNameStr: "orgName",
            orgIdStr: "orgId",
            multiple: false, //是否多选
            option:[],
            allowCreate: true, //是否允许创建条目
            type: "dept-select", //类型
						trigger: "change",
						span: 24,
            methods: (obj, res) => {
               this.getDutyData(obj[0].id)
            },
          } */
          {
            type: "dept", 
            label: "",
            prop: "organizationName",
            idsStr: "organizationId",
            span: 24,
            placeholder: "请选择",
            customType: 'entireTrigger',
            methods: val => {
              this.getDutyData(val[0].id)
              this.setTableConfig()
              this.currentOrg ={
                organizationName:val[0].name,
                organizationId:val[0].id
              }
            }
          },
				]
			},
			organizationData:{
        
      },
      singleClose:true,
      moreDialog:false,
      positionList:[],
      editFormData:{},
      locationName:'',
      showMore:true,
      currentOrg:{
        /* organizationName:this.$store.getters.currentOrgInfo.name,
        organizationId:this.$store.getters.currentOrgInfo.id */
      },
      dutyList:[],
      dutyArr:[],//this.$store.getters["dirtData"]("home_duty_type"),
    };
  },
  computed:{
   
  },
  created(){
    
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      //this.getDutyData(this.$store.getters.currentOrgInfo.id)
      //获取过滤器里面已存数据
      this.getFilterData()
      //this.$refs.organizationForm.setFormItem("organizationName", this.$store.getters.currentOrgInfo.name);
    },
    isHide(){
      let dutyContentClient = this.$refs.dutyContentRef.clientHeight
      let dutyContentScroll = this.$refs.dutyContentRef.scrollHeight
      let dutyContentOffset = this.$refs.dutyContentRef.offsetHeight
      if(dutyContentScroll > dutyContentClient ||dutyContentOffset > dutyContentClient){
        this.isScroll = true
      }else{
        this.isScroll = false
      }
    },
    getFilterData(){
      let form = {
        page: 'dutyToday',
        userId: this.$store.state.user.userInfo.id,
      };
      getTableConfigApi(form).then((res) => {
        let data = res.data;
        this.userConfig = data;
        if (data.length == 0) {
          this.$set(
            this.organizationData,
            "organizationId",
            this.$store.getters.currentOrgInfo.id
          );
          this.$set(
            this.organizationData,
            "organizationName",
            this.$store.getters.currentOrgInfo.name
          );
        
        } else {
          data.map((i) => {
            let formData = {};
            if (i.type == "filter") {
              this.filterObj = i;
              formData = JSON.parse(i.config) || {};
            }
            //formData.organizationId = this.$store.getters.currentOrgInfo.id;
           // formData.organizationName = this.$store.getters.currentOrgInfo.name;
            this.organizationData = formData;
          });
        }
        this.currentOrg ={
          organizationName:this.organizationData.organizationName,
          organizationId:this.organizationData.organizationId
        }
        this.getDutyData(this.organizationData.organizationId)
      });
    },
    //保存过滤器中的查询条件
    setTableConfig() {
      let formData = this.$refs.organizationForm.getCurrentData();
      let form = {
        config: "",
        type: "filter",
        id: "",
        page: 'dutyToday',
        userId: this.$store.state.user.userInfo.id,
      };
      form.id = this.filterObj.id ||'';
      form.config = JSON.stringify(formData);
      setTableConfigApi(form)
        .then((res) => {
          console.log(res.data)
          //this.$emit("getShiftInfo", formData);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //更多按钮点击
    openMore(){
      this.moreDialog = true
    },
   async getDutyData(id){
      let param = {
        deptId :id
      }
      await todayDutyData(param).then(res =>{
        if(res.code ==200){
          let datas = res.data
          this.dutyList = []
          for(let key in res.data){
            this.type0 = []
            this.type1 = []
            this.type2 = []
            this.type3 = []
            this.type4 = []
            res.data[key].map(i =>{
              if(i.type =='0'){
                i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  ),
                this.type0.push(i)
              }
              if(i.type =='1'){
                i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  ),
                this.type1.push(i)
              }
              if(i.type =='2'){
                i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  ),
                this.type2.push(i)
              }
              if(i.type =='3'){
                i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  ),
                this.type3.push(i)
              }
              if(i.type =='4'){
                i.typeName = this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                    i.type
                  ),
                this.type4.push(i)
              }
            }) 
            let obj = {
              position:key,
              personType:[
                {
                  type:'3',
                  typeName:this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                   '3'
                  ),
                  person:this.type3
                },
                {
                  type:'4',
                  typeName:this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                   '4'
                  ),
                  person:this.type4
                },
                {
                  type:'1',
                  typeName:this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                   '1'
                  ),
                  person:this.type1
                },
                {
                  type:'0',
                  typeName:this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                   '0'
                  ),
                  person:this.type0
                },
                {
                  type:'2',
                  typeName:this.$store.getters.fineDirtDataName(
                    "home_duty_type",
                   '2'
                  ),
                  person:this.type2
                },
                
              ]
            }
            this.dutyList.push(obj) 
          }
        }
       }).catch(err =>{
        this.$message.error(err)
      })
      this.isHide()
    },
  }
};
</script>

<style lang="less" scoped>
/deep/.el-form-item{
  margin-bottom: -15px;
}
.dutyToday{
  height: 100%;
  width: 100%;
  .location-title{
    font-size: 14px;
    color: #666666;
  }
  .duty-list{
    width: 100%;
    height: calc(100% - 20px);
    flex-direction: column;
    display: flex;
    position: relative;
  }
  .duty-content{
    width: 100%;
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    //overflow: auto;
    .position-list{
      margin-bottom:5px;
      margin-top:5px
    }
    .location-title-in{
      font-size: 14px;
      color: #666666;
      height: 26px;
      width:calc(100% - 40px);
      margin-left: 20px;
      margin-bottom: 5px;
      border-bottom: 0.5px solid #0D60B4;
      .position-item{
        /* background: #EAF6FF;
        padding: 5px 4px; */
        background: #0D60B4;
        padding: 5px 4px;
        color: #fff;
        border-radius: 0 8px 0 0;
      }
    }
    .onDuty{
      width:calc(100% - 40px);
      margin: 0px 20px 7px 20px;
      /* &:first-child{
        margin: 0px 20px 7px 20px;
      } */
      .duty-name{
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        text-align: left;
        letter-spacing: 6px;
        padding-bottom: 6px;
      }
      .duty-detail{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        min-height:32px;
        margin-bottom: -8px;
        //height: 100%;
        .user-info-item{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          // margin-right:10px;
          height: calc(100% - 20px);
          /* &:nth-child(3n){
            margin-right:0px;
          } */
          .duty-info{
            padding: 0 8px;
            width: 182px;
            text-align: left;
            font-size: 13px;
            height: 30px;
            line-height: 30px;
            background: #F8F8F8;
            border-radius: 4px;
            color: #666666;
            margin-bottom: 8px;
            margin-right:10px;
            &:hover{
              /* cursor: pointer;
              background: #FFFFFF;
              border: 1px solid #0D60B4;
              border-radius: 4px;
              color:#020202; */
            }
            .duty-userName{
              text-align: left;
            }
            .duty-phone{
              padding-top: 6px;
              text-align: left;
            }
            .onduty-name{
              //padding-left: 5px;
              padding-right: 10px;
              text-align: left;
            }
            .onduty-phone{
              padding-left: 5px;
            }
            i{
              color: #CCCCCC;
            }
          }
        }
        
      }
    }
  }
}
.more-part{
  // display: flex;
  // justify-content: flex-end;
  position: absolute;
  right: 0;
  bottom: 48px;
}
.more-btn{
  font-size: 14px;
  color: #999999;
  padding-right: 10px;
  text-align: right;
  cursor: pointer;
  width:60px
}
</style>